<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>listnav</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="./scripts/jquery.1.82.min.js"></script>
        <script type="text/javascript" src="./scripts/jquery.cookie.js"></script>
        <script type="text/javascript" src="./scripts/listnav/jquery.listnav.js"></script>
        <link rel="stylesheet" type="text/css" href="./scripts/listnav/listnav.css" media="all" />
        <script type="text/javascript" src="./scripts/listmenu/jquery.listmenu.js"></script>
        <link rel="stylesheet" type="text/css" href="./scripts/listmenu/listmenu.css" media="all" />
        <script>
            $(function(){
                $('#servers').listnav({ 
                    includeAll: false, 
                    includeNums: false, 
                    includeOther: false, 
                    flagDisabled: true, 
                    noMatchText: 'Nothing matched your filter, please click another letter.', 
                    showCounts: false, 
                    cookieName: 'my-main-list',
                    cookieExpires:{expires:30}
                });
                
                $('#products').listmenu({ 
                    includeNums: false, 
                    includeOther: false, 
                    flagDisabled: true, 
                    noMatchText: 'No items under this letter', 
                    showCounts: false, 
                    menuWidth: 825, 
                    cols:{ 
                        count: 5, 
                        gutter: 15 
                    }, 
                    onClick:function($target){ 
                        if($target.is('a')){ 
                            alert($target.text() + ' was clicked'); 
                        } 
                    } 
                }); 
            });
        </script>
    </head>
    <body>
        <div>
            Hot server:
            lister btut
        </div>
        <div></div>
        <div id="servers-nav"></div>
        <ul id="servers">
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
        </ul>

        <div class="lm-wrapper">
            <div id="products-menu"></div>
            <ul id="products">
                <li>Asdfsdfsdfsdf</li>
                <li>Bsdfsdfsdfsdf</li>
                <li>Bsdfsdfsdfsdf</li>
                <li>Bsdfsdfsdfsdf</li>
                <li>Bsdfsdfsdfsdf</li>
                <li>Bsdfsdfsdfsdf</li>
                <li>Csdfsdfsdf</li>
                <li>Dsdfsdfsf</li>
                <li>Esdfsdfsdf</li>
                <li>Fsdfsdfsd</li>
            </ul>
        </div>



    </body>
</html>
